<template>
	<div class="date-list">
		<img class="date-pic" src="../../assets/pic/pic_0.png" />
		<img class="date-pic-now" src="../../assets/pic/line2_bg.png" />
		<span class="date-pic-now-span">开始</span>
		<ul class="date-bg">
			<li class="date-li" v-for="event in event_msg">
				<div class="date-day" @click="jump(event.id)">
					<img v-if="(event.id)%6+1 == '1'" class="date-img" src="../../assets/pic/pic_1.png" />
					<img v-if="(event.id)%6+1 == '2'" class="date-img" src="../../assets/pic/pic_2.png" />
					<img v-if="(event.id)%6+1 == '3'" class="date-img" src="../../assets/pic/pic_3.png" />
					<img v-if="(event.id)%6+1 == '4'" class="date-img" src="../../assets/pic/pic_4.png" />
					<img v-if="(event.id)%6+1 == '5'" class="date-img" src="../../assets/pic/pic_5.png" />
					<img v-if="(event.id)%6+1 == '6'" class="date-img" src="../../assets/pic/pic_6.png" />
					<div class="date-time">{{event.event_day}}</div>
					<div class="date-thing">
						{{event.content}}
					</div>
				</div>
			</li>
		</ul>
		<!--添加事件-->
		<img @click="addEvent()" class="add-event" src="../../assets/add.png" />
	</div>
</template>

<script>
	import BaseHeader from "@/components/common/BaseHeader"
	export default {
		props: ['plan_id', 'step', 'event_msg'],
		components: {
			BaseHeader,
		},
		data() {
			return {
				num: ''
			}
		},
		mounted() {
			this.num = Math.floor(Math.random() * 6 + 1);
			var appH = document.documentElement.clientHeight;
			console.log(appH);
			$(".date-li").height((appH - 48) / 2);
			console.log(this.event_msg);
		},
		methods: {
			//添加事件
			addEvent(id) {
				this.$router.push({
					name: 'AddEvent',
					params: {
						pid: this.plan_id
					}
				});
			},
			//
			jump(id) {
				this.$router.push({
					name: 'EventDetails',
					params: {
						eid: id
					}
				});
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import "../../style/brace.css";
	.date-list {
		position: absolute;
		width: 100%;
		top: 0;
		height: 100%;
	}
	
	.date-bg {
		background-image: url(../../assets/pic/line_bg.png);
		position: relative;
		width: 100%;
		min-height: 600px;
		top: 0;
		left: 0;
		background-size: 100%;
		background-repeat: repeat-y;
	}
	
	.date-pic-now {
		position: absolute;
		width: 100%;
		top: 44%;
		z-index: 10;
		left: 0;
	}
	
	.date-pic-now-span {
		position: absolute;
		padding: 5px 20px;
		top: 44%;
		z-index: 10;
		left: 50%;
		color: #fff;
		background-color: #F9B121;
		border-radius: 10px;
		margin-left: 8px;
	}
	
	.date-pic {
		position: absolute;
		left: 65%;
		top: 16%;
		z-index: 9;
		width: 12%;
	}
	
	.date-li {
		position: relative;
	}
	
	.date-li:nth-child(n) .date-day {
		text-align: center;
		position: absolute;
		bottom: 40px;
		color: #fff;
		left: 0px;
		width: 60%;
	}
	
	.date-li:nth-child(2n) .date-day {
		text-align: center;
		position: absolute;
		top: 40px;
		color: #fff;
		left: 40%;
		width: 60%;
	}
	
	.date-img {
		width: 100%;
	}
</style>